<template>
  <!-- 赞赏页面 -->
  <view class="main">
    <view class="top_tou">
      <view class="left_" @tap="fanLastPage">
        <image
          src="../../images/aliang/navigation.png"
          mode="aspectFill"
        ></image>
      </view>
      <view class="center_">赞赏记录</view>
      <view class="right_"></view>
    </view>
    <view class="xian"></view>
    <view class="content">
      <view class="switch">
        <view class="exceptional" @tap="choose('赞赏')">
          <text :class="[switch1 == '赞赏' ? 'active' : '']">赞赏</text>
          <view v-show="is_exceptional"></view>
        </view>
        <view class="beExceptional" @tap="choose('被赞赏')">
          <text :class="[switch1 == '被赞赏' ? 'active' : '']">被赞赏</text>
          <view v-show="!is_exceptional"></view>
        </view>
      </view>
      <!-- 无赞赏记录 -->
      <view class="wu_Huo" v-if="is_exceptional && dashangData.length < 1">
        <image src="../../imges/wuhuodong.png" mode="aspectFill"></image>
        <text>暂无赞赏记录</text>
      </view>

      <!-- 赞赏展示 -->
      <view v-if="is_exceptional && dashangData.length > 0">
        <view v-for="(item, index) in dashangData" class="dashang" :key="index">
          <view class="head">
            <text class="time">{{ item.showDate }}</text>
            <view class="right">
              赞赏：
              <text>￥ {{ item.money }}</text>
            </view>
          </view>
          <view class="blessing" v-if="item.blessWord">
            <view class="left">
              <image src="../../imges/zhufu.png" mode="aspectFill"></image>
              <view class="zufu">祝福语：</view>
            </view>
            <view class="right">
              {{ item.blessWord }}
            </view>
          </view>
          <view
            class="tiezi"
            @tap="
              toTiezi(
                item.webOrgRewardMessageDto.id,
                item.webOrgRewardMessageDto.messageType
              )
            "
          >
            <view class="top">
              <view
                class="left"
                @tap.stop="toCard(item.webOrgRewardMessageDto.createUid)"
              >
                <image
                  :src="item.webOrgRewardMessageDto.avatarUrl"
                  mode="aspectFill"
                ></image>
              </view>
              <view class="right">
                <view class="rtop">
                  <text class="name">{{
                    item.webOrgRewardMessageDto.userName
                  }}</text>
                  <text class="from">{{
                    item.webOrgRewardMessageDto.company
                  }}</text>
                </view>
                <view class="rbottom">
                  <text>{{ item.webOrgRewardMessageDto.showDate }}</text>
                </view>
              </view>
            </view>
            <view class="tieziText">
              {{
                item.webOrgRewardMessageDto.content
                  .replace(/<.*?>/g, "")
                  .trim()
                  .replace(/&nbsp;/g, "")
              }}
            </view>
          </view>
        </view>
      </view>

      <!-- 无被赞赏记录 -->
      <view class="wu_Huo" v-if="!is_exceptional && beidashangData.length < 1">
        <image src="../../imges/wuhuodong.png" mode="aspectFill"></image>
        <text>暂无被赞赏记录</text>
      </view>
      <!-- 被赞赏展示 -->
      <view v-if="!is_exceptional && beidashangData.length > 0">
        <view v-for="item in beidashangData" class="beidashang">
          <view class="head">
            <view class="left" @tap.stop="toCard(item.createUid)">
              <view class="l-left">
                <image :src="item.createUrl" mode="aspectFill"></image>
              </view>
              <view class="l-right">
                <view class="rtop">
                  <text class="name">{{ item.createName }}</text>
                  <text class="from">{{ item.company }}</text>
                </view>
                <view class="rbottom">
                  <text>{{ item.showDate }}</text>
                </view>
              </view>
            </view>
            <view class="right">
              <view>
                赞赏：
                <text>￥ {{ item.money }}</text>
              </view>
              <view class="time" v-if="item.isAccount != 1">
                {{ item.estimatedTimeStr }}
              </view>
            </view>
          </view>
          <view class="blessing" v-if="item.content">
            <view class="left">
              <image src="../../imges/zhufu.png" mode="aspectFill"></image>
              <view class="zufu">祝福语：</view>
            </view>
            <view class="right">
              {{ item.blessWord }}
            </view>
          </view>
          <view
            class="tiezi"
            @tap="
              toTiezi(
                item.webOrgRewardMessageDto.id,
                item.webOrgRewardMessageDto.messageType
              )
            "
          >
            <view class="top">
              <view class="left">
                <image
                  :src="item.webOrgRewardMessageDto.orgUrl"
                  mode="aspectFill"
                ></image>
              </view>
              <view class="right">
                <view class="rtop">
                  <text class="name">{{
                    item.webOrgRewardMessageDto.orgName
                  }}</text>
                </view>
                <view class="rbottom">
                  <text>{{ item.webOrgRewardMessageDto.showDate }}</text>
                </view>
              </view>
            </view>
            <view class="tieziText">
              {{
                item.webOrgRewardMessageDto.content
                  .replace(/<.*?>/g, "")
                  .trim()
                  .replace(/&nbsp;/g, "")
              }}
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="footer">
      合计：
      <text
        >￥ {{ is_exceptional == true ? zsallBalance : bzsallBalance }}</text
      >
    </view>
  </view>
</template>

<script>
import request from "../../utils/request.js";
export default {
  data() {
    return {
      switch1: "赞赏",
      is_exceptional: true,
      dashangData: [],
      beidashangData: [],
      zsallBalance: "",
      bzsallBalance: "",
      bottom: false,
      noMore: false,
      noMoreData: false,
      pageSize1: 10,
      bottom1: false,
      noMore1: false,
      noMoreData1: false,
      pageSize2: 10,
    };
  },
  onLoad() {
    this.zanshang();
    this.beizanshang();
  },
  onShow() {
    this.bottom = false;
    this.bottom1 = false;
  },
  onReachBottom() {
    if (this.switch1 == "赞赏") {
      if (this.noMoreData) {
        return false;
      }
      uni.showLoading({
        title: "加载中",
      });
      this.bottom = true;
      this.pageSize1 = this.pageSize1 + 10;
      this.zanshang();
    } else {
      if (this.noMoreData1) {
        return false;
      }
      uni.showLoading({
        title: "加载中",
      });
      this.bottom1 = true;
      this.pageSize2 = this.pageSize2 + 10;
      this.beizanshang();
    }
  },
  onPullDownRefresh() {
    if (this.switch1 == "赞赏") {
      this.bottom = false;
      this.noMore = false;
      this.noMoreData = false;
      this.pageSize1 = 10;
      setTimeout(() => {
        this.zanshang();
        uni.stopPullDownRefresh();
        uni.showToast({
          title: "刷新成功",
          duration: 1500,
          icon: "none",
        });
      }, 1000);
    } else {
      this.bottom1 = false;
      this.noMore1 = false;
      this.noMoreData1 = false;
      this.pageSize2 = 10;
      setTimeout(() => {
        this.beizanshang();
        uni.stopPullDownRefresh();
        uni.showToast({
          title: "刷新成功",
          duration: 1500,
          icon: "none",
        });
      }, 1000);
    }
  },
  methods: {
    fanLastPage() {
      //返回上一页
      window.history.go(-1);
    },
    toTiezi(id, messageType) {
      if (messageType == 13) {
        uni.navigateTo({
          url: "/pages/index/trickDetail?id=" + id,
        });
      } else {
        // console.log(this.request.defaults.baseURL)
        window.location.href =
          this.request.defaults.baseURL + "h5/shareArticle?orgMsgId=" + id;
      }
    },
    toCard(id) {
      uni.navigateTo({
        url: "/pages/index/personal?id=" + id,
      });
    },
    //请求赞赏记录数据
    zanshang() {
      let token = uni.getStorageSync("token");
      const that = this;
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/reward/record",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            pageSize: this.pageSize1,
            pageNumber: 1,
            type: 1,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            that.dashangData = res.data.data.rows;
            that.zsallBalance = res.data.data.allBalance;
            console.log(that.dashangData);
            // that.dashangData.webOrgRewardMessageDto.content = that.dashangData.webOrgRewardMessageDto.content.replace(/<.*?>/g,'').trim()
            if (res.data.data.total == 0) {
              uni.hideLoading();
              return false;
            }
            if (
              that.bottom &&
              that.dashangData.length >= res.data.data.total &&
              !that.noMore
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
              that.noMore = true;
              return false;
            }
            if (
              that.dashangData.length >= res.data.data.total &&
              that.bottom &&
              !that.noMoreData
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "没有更多数据了",
                duration: 1000,
                icon: "none",
              });
              that.noMoreData = true;
            } else if (
              that.dashangData.length < res.data.data.total &&
              that.bottom &&
              that.dashangData.length != 0
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    //请求被赞赏记录数据
    beizanshang() {
      let token = uni.getStorageSync("token");
      const that = this;
      // console.log(token, 'token')
      if (!token) {
        uni.showToast({
          title: "请授权登录再操作！",
          duration: 2000,
          icon: "none",
        });
        setTimeout(() => {
          uni.navigateTo({
            url: "/pages/index/index",
          });
        }, 2000);
      } else {
        request({
          url: "h5/reward/record",
          method: "POST",
          header: {
            "content-type": "application/json;charset=UTF-8",
            "api-client": "72e0fee8172411ea995200163e05ff66",
            "api-version": this.globalData.apiVersion,
            "Source-Type": 7,
            token: token,
          },
          data: {
            pageSize: this.pageSize2,
            pageNumber: 1,
            type: 2,
          },
        }).then((res) => {
          if (res.data.code == 200) {
            that.beidashangData = res.data.data.rows;
            that.bzsallBalance = res.data.data.allBalance;
            if (res.data.data.total == 0) {
              uni.hideLoading();
              return false;
            }
            if (
              that.bottom1 &&
              that.beidashangData.length >= res.data.data.total &&
              !that.noMore1
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
              that.noMore1 = true;
              return false;
            }
            if (
              that.beidashangData.length >= res.data.data.total &&
              that.bottom1 &&
              !that.noMoreData1
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "没有更多数据了",
                duration: 1000,
                icon: "none",
              });
              that.noMoreData1 = true;
            } else if (
              that.beidashangData.length < res.data.data.total &&
              that.bottom1 &&
              that.beidashangData.length != 0
            ) {
              uni.hideLoading();
              uni.showToast({
                title: "加载完成",
                duration: 1000,
                icon: "none",
              });
            }
          } else {
            uni.showToast({
              title: res.data.msg,
              duration: 2000,
              icon: "none",
            });
          }
        });
      }
    },
    choose(str) {
      this.switch1 = str;
      if (str == "赞赏") {
        this.is_exceptional = true;
      } else {
        this.is_exceptional = false;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  padding-bottom: 120rpx;
  padding-top: 92rpx;
  .top_tou {
    box-sizing: border-box;
    display: flex;
    padding: 0 38rpx;
    width: 750rpx;
    height: 92rpx;
    background: #f8f8f8;
    line-height: 92rpx;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;

    .left_ {
      height: 28rpx;
      width: 18rpx;

      image {
        width: 100%;
        height: 100%;
      }
    }

    .center_ {
      font-size: 36rpx;
      font-family: PingFangSC, PingFangSC-Medium;
      font-weight: 500;
      text-align: center;
      color: #111111;
    }

    .right_ {
      width: 18rpx;
    }
  }
}
.xian {
  width: 100%;
  height: 1rpx;
  background-color: #cccccc;
  // position: fixed;
  // top: 0;
  // left: 0;
}
.footer {
  width: 100%;
  height: 100rpx;
  background-color: #ffffff;
  position: fixed;
  bottom: 0;
  left: 0;
  border-top: 1rpx solid #dddddd;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  color: #888888;
  font-size: 30rpx;
  text {
    margin-right: 31rpx;
    color: #ff6400;
  }
}
.content {
  padding: 0 32rpx;
}
.dashang {
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  box-sizing: border-box;
  .head {
    display: flex;
    justify-content: space-between;
    .time {
      font-size: 30rpx;
      color: #333333;
    }
    .right {
      font-size: 30rpx;
      color: #888888;
      text {
        color: #ff6400;
      }
    }
  }
  .tiezi {
    display: flex;
    flex-direction: column;
    background-color: #f8f8fa;
    padding: 30rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
    .top {
      display: flex;
      .left {
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
        border-radius: 50%;
        image {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
        }
      }
      .right {
        height: 80rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .rtop {
          height: 40rpx;
          line-height: 40rpx;
          display: flex;
          justify-content: space-between;
          flex-wrap: nowrap;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          .name {
            font-size: 26rpx;
            font-family: PingFang-SC-Bold;
            color: #333333;
            font-weight: bold;
            // overflow: hidden;
            // white-space:nowrap;
            // text-overflow: ellipsis;
          }
          .from {
            margin-left: 17rpx;
            font-size: 22rpx;
            color: #888888;
          }
        }
        .rbottom {
          height: 40rpx;
          line-height: 40rpx;
          text {
            font-size: 24rpx;
            color: #888888;
          }
        }
      }
    }
    .tieziText {
      color: #888888;
      font-size: 24rpx;
      margin-top: 15rpx;
      display: -webkit-box;
      overflow: hidden;
      white-space: normal !important;
      text-overflow: ellipsis;
      word-wrap: break-word;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }
  .blessing {
    display: flex;
    margin-top: 29rpx;
    box-sizing: border-box;
    .left {
      display: flex;
      height: 32rpx;
      image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }
      .zufu {
        width: 115rpx;
        font-size: 28rpx;
        color: #888888;
      }
    }
    .right {
      font-size: 28rpx;
      color: #333333;
    }
  }
}
.beidashang {
  margin-bottom: 20rpx;
  padding-bottom: 20rpx;
  box-sizing: border-box;
  .head {
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      .l-left {
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
        image {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
        }
      }
      .l-right {
        max-width: 390rpx;
        height: 80rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .rtop {
          max-width: 390rpx;
          height: 40rpx;
          line-height: 40rpx;
          display: flex;
          justify-content: space-between;
          flex-wrap: nowrap;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          .name {
            font-size: 26rpx;
            font-family: PingFang-SC-Bold;
            color: #333333;
            font-weight: bold;
          }
          .from {
            margin-left: 17rpx;
            font-size: 22rpx;
            color: #888888;
          }
        }
        .rbottom {
          height: 40rpx;
          line-height: 40rpx;
          text {
            font-size: 24rpx;
            color: #888888;
          }
        }
      }
    }
    .right {
      font-size: 30rpx;
      color: #888888;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      text-align: right;
      text {
        color: #ff6400;
      }
      .time {
        font-size: 20rpx;
        font-family: PingFangSC, PingFangSC-Regular;
        font-weight: 400;
        color: #999999;
        line-height: 28rpx;
      }
    }
  }
  .tiezi {
    display: flex;
    flex-direction: column;
    background-color: #f8f8fa;
    padding: 30rpx;
    box-sizing: border-box;
    margin-top: 20rpx;
    .top {
      display: flex;
      .left {
        width: 80rpx;
        height: 80rpx;
        margin-right: 20rpx;
        border-radius: 50%;
        image {
          width: 80rpx;
          height: 80rpx;
          border-radius: 50%;
        }
      }
      .right {
        height: 80rpx;
        display: flex;
        flex-direction: column;
        justify-content: center;
        .rtop {
          height: 40rpx;
          line-height: 40rpx;
          flex-wrap: nowrap;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
          overflow: hidden;
          .name {
            font-size: 28rpx;
            font-family: PingFang-SC-Bold;
            color: #333333;
            font-weight: bold;
          }
          .from {
            margin-left: 17rpx;
            font-size: 24rpx;
            color: #888888;
          }
        }
        .rbottom {
          height: 40rpx;
          line-height: 40rpx;
          text {
            font-size: 24rpx;
            color: #888888;
          }
        }
      }
    }
    .tieziText {
      color: #888888;
      font-size: 24rpx;
      margin-top: 15rpx;
      display: -webkit-box;
      overflow: hidden;
      white-space: normal !important;
      text-overflow: ellipsis;
      word-wrap: break-word;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }
  }
  .blessing {
    display: flex;
    margin-top: 29rpx;
    box-sizing: border-box;
    .left {
      display: flex;
      height: 32rpx;
      image {
        width: 32rpx;
        height: 32rpx;
        margin-right: 10rpx;
      }
      .zufu {
        width: 115rpx;
        font-size: 28rpx;
        color: #888888;
      }
    }
    .right {
      font-size: 28rpx;
      color: #333333;
    }
  }
}
.wu_Huo {
  margin-top: 300rpx;
  display: flex;
  flex-direction: column;
  align-items: center;

  image {
    width: 300rpx;
    height: 260rpx;
  }

  text {
    font-size: 28rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: rgba(136, 136, 136, 1);
    line-height: 37px;
  }
}
.switch {
  display: flex;
  .exceptional,
  .beExceptional {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 30rpx;
    color: #999999;
    margin-right: 50rpx;
    padding: 40rpx 0;
    view {
      width: 36rpx;
      height: 6rpx;
      background-color: #2168eb;
      margin-top: 5rpx;
    }
  }
  .active {
    font-size: 32rpx;
    color: #333333;
    font-weight: bold;
  }
}
</style>
